<script setup lang='ts'>
import type { VxeGridProps } from 'vxe-table'

import { useDelScheme, useEditScheme, useGetSchemeList } from '@fl/api/man-api'
import { SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import AddOrEditScheme from './add-or-edit-scheme.vue'

const router = useRouter()
const id = ref<number | string>('')
const visible = ref<boolean>(false)
const { createConfirmModal, createMessage } = useMessage()

const records = ref()

const STATUS_DICT = {
    0: {
        bg: 'bg-red-500',
        bool: true,
        label: '停用',
        msg: '启用成功',
        tooltipLabel: '是否启用该数据',
    },
    1: {
        bg: 'bg-green-500',
        bool: false,
        label: '启用',
        msg: '停用成功',
        tooltipLabel: '是否停用该数据',
    },
}
const gridOptions = reactive<VxeGridProps>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'name', title: '类目方案名称' },
        { field: 'createTime', title: '创建时间' },
        { field: 'createBy', title: '创建人' },
        { field: 'status', slots: { default: 'status' }, title: '状态' },
        { slots: { default: 'operate' }, title: '操作' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 500,
    keepSource: true,
    showOverflow: true,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

const { data: tableData, isLoading } = useGetSchemeList()
const { mutate: editSchemeMutate } = useEditScheme()
const { mutate: delSchemeMutate } = useDelScheme()

watchEffect(() => {
    if (tableData.value) {
        records.value = cloneDeep(tableData.value)
    }
})

function addCategory() {
    visible.value = true
    id.value = ''
    // router.push('/operations-pages/category-management/configuration')
}

function enableChange(row: any) {
    const tip = STATUS_DICT[row.status]?.tooltipLabel || ''
    createConfirmModal({ content: tip, onError: () => {
        console.log('操作取消！')
    }, onSuccess: () => {
        editSchemeMutate({
            id: row.id,
            status: Number(STATUS_DICT[row.status].bool),
        }, {
            onSuccess: () => {
                const msg = STATUS_DICT[row.status].msg
                createMessage.success(msg)
            },
        })
    } })
}

function delScheme(id: any) {
    createConfirmModal({ content: '是否确认删除？', onError: () => {
        console.log('操作取消！')
    }, onSuccess: () => {
        delSchemeMutate(id, {
            onSuccess: () => {
                createMessage.success('删除成功')
            },
        })
    } })
}

function editScheme(schemeId: number) {
    id.value = schemeId
    visible.value = true
}

function configScheme(row: any) {
    router.push(
        {
            path: '/operations-pages/category-management/configuration',
            query: {
                id: row.id,
                name: row.name,
            },
        },
    )
}
</script>

<template>
    <ElCard shadow="never">
        <SearchTable v-bind="gridOptions"
                     row-class-name="table-row-style"
                     :loading="isLoading"
                     :data="records"
        >
            <template #toolbar_buttons>
                <div class="w-full">
                    <el-row>
                        <el-col :span="12">
                            <ElButton type="primary"
                                      @click="addCategory"
                            >
                                新建
                            </ElButton>
                        </el-col>
                    </el-row>
                </div>
            </template>

            <template #status="{ row }">
                <span class="inline-block rounded-full h-8 w-8"
                      :class="STATUS_DICT[row.status].bg"
                />
                {{ STATUS_DICT[row.status].label }}
            </template>

            <template #operate="{ row }">
                <el-space>
                    <div class="text-blue-400">
                        <span v-if="row.status === 0"
                              class="cursor-pointer"
                              @click="enableChange(row)"
                        >
                            启用
                        </span>

                        <span v-if="row.status === 1"
                              class="cursor-pointer"
                              @click="enableChange(row)"
                        >
                            停用
                        </span>

                        <span class="cursor-pointer"
                              @click="editScheme(row.id)"
                        >
                            修改方案
                        </span>

                        <span class="cursor-pointer"
                              @click="delScheme(row.id)"
                        >
                            删除
                        </span>

                        <span class="cursor-pointer"
                              @click="configScheme(row)"
                        >
                            配置类目
                        </span>
                    </div>
                </el-space>
            </template>
        </SearchTable>
    </ElCard>

    <AddOrEditScheme :key="id"
                     v-model:visible="visible"
                     v-model:id="id"
    />
</template>

<style scoped lang='less'>
</style>
